<template>
    <el-dialog
      title="分配角色"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="Offf"
      @open="gethttplist"
      @closed="setRoleDialogClosed"
      >         
                <p><span>当前的用户:{{users.name}}</span></p>
                <p><span>当前的角色:{{users.role}}</span></p>
                <span>分配新的角色:</span>
                <el-select v-model="users.newrole" placeholder="请选择">
                    <el-option 
                    v-for="item in roleList"
                    :key="item.id"
                    :label="item.roleName" 
                    :value="item.id"></el-option>
                </el-select>
      
        <span slot="footer" class="dfialog-footer">
              <el-button @click="Offf">取 消</el-button>
              <el-button type="primary" @click="updatedUserRole">确 定</el-button>
        </span>
  </el-dialog>
  </template>
  
  <script>
  export default {
  name:'assionRole',
  data() {
      return {
          // 列表数据
          users: {
            id:'',
            name: '',
            role: '',
            newrole:''
          },
        //角色列表数据
        roleList:{}
      };
  },
  methods: {
    // 模态框关闭时执行的回调
    setRoleDialogClosed(){
      this.roleList={}
      this.users={}
      console.log("模态框关闭了");
    },
      // 关闭模态框
      Offf(){
          this.offf()
      },
      //发送请求获取列表数据
      gethttplist(){
        // 数据初始化赋值
        this.users.name=this.user.username
        this.users.role=this.user.role_name
        this.users.id=this.user.id
          this.$http.get('roles').then(
          respose => {//正确请求时执行的代码
              console.log(respose.data);
              if(respose.data.meta.status!=200){
                //   console.log("获取失败");
              }else{
                //   console.log("获取成功");
                    // console.log(respose.data.data);
                  this.roleList = respose.data.data
              }
              
          },error => {},)
      },
    //  修改用户角色信息
      updatedUserRole(){
        if(!this.users.newrole)
        {
            return this.$message.error('请选择一个角色')
        }
        this.$http.put(`users/${this.users.id}/role`,{rid:this.users.newrole}).then(
        respose => {//正确请求时执行的代码
            console.log(respose.data);
            if(respose.data.meta.status!=200){}
            else{
                this.$message({
                    message: '修改用户角色成功',
                    type: 'success',
                    duration:2000
                    })
                // console.log(this.users);
                // 关闭模态框
                this.offf()
                // 刷新页面
                this.gethttp()
            }
        },error => {},)
      }
  },
  props:['dialogVisible','offf','user','gethttp']
  }
  </script>
  
  <style>
  
  </style>